<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    main{
      overflow: hidden;
      width: 98%;
    }
    main div.row div.my_body div.panel{
      height: 100%;
    }

    aside.my_nav{
      background-color: #ffffff;
      position: absolute;
      top: 170px;
      left: 20px;
      width: calc(100% / 6 - 40px);
    }
    div.my_body div.panel div.panel-body{
      height: calc(100% - 38px);
      overflow-y: auto;

    }
    .panel{
    }
  </style>
</head>
<div class="bbyy">
  <% include head.ejs %>
  <aside class="panel panel-primary my_nav">
    <div class="panel-heading">
      <h3 class="panel-title">我的</h3>
    </div>
    <div class="panel-body">
      <ul class="list-unstyled" style="line-height: 40px;">
        <li>
          <a href="/users/ge" >我的账户</a>
        </li>
        <li>
          <a href="/users/gtwo"  >完善个人信息</a>
        </li>
        <!--<li>-->
        <!--<a href="#" class="">慕课网</a>-->
        <!--</li>-->
        <!--<li>-->
        <!--<a href="#" class="">Sass中国</a>-->
        <!--</li>-->
      </ul>
    </div>
  </aside>
  <main class="container-fluid">
    <div class="row">
      <div class="col-md-10 col-md-offset-2 my_body">
        <div class="panel panel-primary" id="one" style=" display: block;">
          <div class="panel-heading">
            <h3 class="panel-title">我的账户</h3>
          </div>
          <div class="panel-body">
            <div class="row">
              <div class="col-md-9" id="list">

              </div>
              <div class="col-md-3">
                <img src="favicon.ico" style="width: 130px;height: 130px">
              </div>

            </div>
            <div class="row">
              我的浏览记录
              <div class="row" style="border-top: 1px solid grey;border-bottom: 1px solid grey">
                <div class="col-md-3" style="border-right: 1px solid grey">
                  <img src="../images/pp.jpg" style="width: 100%;margin:2px 10px">
                  <p>nba球衣</p>
                </div>
                <div class="col-md-3" style="border-right: 1px solid grey">
                  <img src="../images/pp.jpg" style="width: 100%;margin:2px 10px">
                  <p>nba球衣</p>
                </div>
                <div class="col-md-3" style="border-right: 1px solid grey">
                  <img src="../images/pp.jpg" style="width: 100%;margin:2px 10px">
                  <p>nba球衣</p>
                </div>
                <div class="col-md-3" style="border-right: 1px solid grey">
                  <img src="../images/pp.jpg" style="width: 100%;margin:2px 10px">
                  <p>nba球衣</p>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
  <% include foot.ejs %>
</div>
<template id="con_temp">
  <p>昵称：{username}</p>
  <p>电话号码：{phone}</p>
  <p>收货地址：{where}</p>
  <p>账户余额：{qian}</p>
  <p>个性签名：{speek}</p>
  <!--<div class="col-sm-3">-->
  <!--<a href="/users/detail?id={id}">-->
  <!--<figure>-->
  <!--<img src="/uploads/{imgsrc}" alt="">-->
  <!--<p>{name}</p>-->
  <!--<span>{price}</span>-->
  <!--</figure>-->
  <!--</a>-->
  <!--</div>-->
</template>

<script>

      function show() {
        $.getJSON('/users/geen', function (obj) {
          let temp = $('#con_temp').html();
          let html = '';
          console.log(obj)
          obj.qq.forEach(function (el) {
            html += temp.replace('{username}', el.username).replace('{phone}', el.phone).replace('{where}', el.where).replace('{qian}', el.qian).replace('{speek}', el.speek)
          })
          console.log(obj)
          $('#list').html(html);
          console.log(obj)
        })
      }
    show();

</script>
</html>
